body {
    /*background: black;*/
}

* {
    box-sizing: border-box;
}

.container {
    width: 200px;
    height: 100px;
    border: 10px solid hsla(0, 0%, 100%, 0.5);
    background: white no-repeat;
    background-clip: padding-box;
}

.multiple-borders {
    width: 200px;
    height: 100px;
    background: yellowgreen;
    /*box-shadow: inset 0 0 0 10px #655, inset 0 0 0 15px deeppink, inset 0 2px 5px 15px rgba(0, 0, 0, 0.6);*/
    border: 10px solid #655;
    outline: 5px solid deeppink;
    outline-offset: 4px;
}

.extended-bg-position {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    /*background: url("./630.png") no-repeat right 20px bottom 10px;*/
    /*background: url("./630.png") no-repeat;*/
    /*padding: 10px;*/
    /*!*-webkit-background-origin: content-box;*!*/
    /*background-origin: content-box;*/
    background: url("./630.png") no-repeat calc(100% - 10px) calc(100% - 20px);
    /*background: url("./630.png") no-repeat 180px calc(100% - 20px);*/
}

/*.something-meaningful {*/
/*    width: 200px;*/
/*    background: #655;*/
/*    padding: .8em;*/
/*}*/

/*.something-meaningful > div {*/
/*    background: tan;*/
/*    border-radius: 0.8em;*/
/*    padding: 1em;*/
/*}*/

.something-meaningful {
    width: 200px;
    background: tan;
    border-radius: 0.8em;
    padding: 1em;
    box-shadow: 0 0 0 0.4em #655;
    outline: 0.6em solid #655;
}

.horizontal-stripes {
    display: inline-block;
    width: 200px;
    height: 100px;
    /*background: linear-gradient(#fb3 50%, #58a 50%);*/
    /*background: linear-gradient(#fb3 30%, #58a 30%);*/
    /*background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);*/
    /*background: linear-gradient(to right, #fb3 50%, #58a 0);*/
    /*background-size: 100% 30px;*/
    /*background-size: 30% 100px;*/
    /*background: linear-gradient(45deg, #fb3 50%, #58a 0);*/
    /*background-size: 30px 30px;*/
    /*background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);*/
    /*background-size: 42px 42px;*/
    /*background: repeating-linear-gradient(45deg, #fb3, #58a 30px);*/
    /*background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);*/
    /*background: repeating-linear-gradient(30deg, #79a, #79a 15px, #58a 0, #58a 30px);*/
    /*background: #58a repeating-linear-gradient(30deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px);*/
    background-color: white;
    background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0), linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0);
    background-size: 30px 30px;
}

.blueprint {
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: #58a;
    background-image: linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}

.polka {
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: #655;
    background-image: radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

.chessboard {
    display: inline-block;
    width: 200px;
    height: 100px;
    /*background-color: #eee;*/
    /*background-image: linear-gradient(45deg, #bbb 25%, transparent 0),*/
    /*linear-gradient(45deg, transparent 75%, #bbb 0),*/
    /*linear-gradient(45deg, #bbb 25%, transparent 0),*/
    /*linear-gradient(45deg, transparent 75%, #bbb 0);*/
    /*background-size: 30px 30px;*/
    /*background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;*/
    /* conic-gradient */
    /*background-image: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);*/
    /*background-size: 30px 30px;*/
    /* gradient */
    background-color: #eee;
    background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

.cicada-stripes {
    width: 600px;
    height: 100px;
    display: inline-block;
    /*background-image: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);*/
    /*background-size: 80px 100%;*/

    background-color: hsl(20, 40%, 90%);
    background-image: linear-gradient(90deg, #fb3 10px, transparent 0),
    linear-gradient(90deg, #ab4 20px, transparent 0),
    linear-gradient(90deg, #655 20px, transparent 0);
    /*background-size: 80px 100%, 60px 100%, 40px 100%;*/
    background-size: 41px 100%, 61px 100%, 83px 100%;
}
